import React, { Component } from 'react';
import { Anchor } from 'antd';
import scss from "./index.module.scss"


// background-clip
const Background_1 = () => {
	return (
		<div id='background_1' className='bac background_1'>
			<h1>background-clip实现填充效果</h1>
			<div className='clip'>
				<p>background-clip</p>
			</div>
			<h1>background-clip滚动填充效果</h1>
			<div className='clip-scroll'>
				灵动的 iPhone 新玩法，迎面而来。
				重大的安全新功能，为拯救生命而设计。
				创新的 4800 万像素主摄，让细节纤毫毕现。
				更有 iPhone 芯片中的速度之王，为一切提供强大原动力。
				<div className='basepic'></div>
			</div>
		</div>
	);
}

// background-attachment
const Background_2 = () => {
	return (
		<div id='background_2' className='bac background_2'>
			<div className='bg'></div>
		</div>
	);
}

// box-shadow光线效果
const BoxShadow_1 = () => {
	return (
		<div id='boxShadow_1' className='bac boxShadow_1'>
			<div className="wrap">
				<div className="shadowTop"></div>
				<div className="shadowBottom"></div>
			</div>
		</div>
	);
}

// 锚点列表
const Anchor_item = [
	{ key: "background_1", href: "#background_1", title: "background-clip" },
	{ key: "background_2", href: "#background_2", title: "background-attachment" },
	{ key: "boxShadow_1", href: "#boxShadow_1", title: "box-shadow光线效果" },
]

// 背景
const Css_background: React.FC = () => (
	<div className={scss["css-sub2"]} id='css-sub2' >
		<div className='anchor'>
			<Anchor
				getContainer={() => document.getElementById("css-sub2")}
				direction="horizontal"
				items={Anchor_item}
			/>
		</div>
		<Background_1 />
		<Background_2 />
		<BoxShadow_1 />
	</div>
);

export default Css_background;